<template>
  <view class="check-in-details">
    <view class="check-in-details">
      <view class="details-tabs">
        <nut-tabs
          v-model="activeTab"
          :swipeable="true"
          @change="changeTab"
        >
          <nut-tab-pane
            v-for="tab in tabs"
            :key="tab.id"
            :title="tab.title"
            :disabled="tab.disabled"
          >
            <view
              class="clock-in-list"
              v-if="tab.id == 0 || tab.id == 1"
            >
              <view class="clock-in-item">
                <view class="tabs-title">
                  <view class="tabs-title-con">
                    <i class="iconfont icon-fanhui"></i>
                    <text>上一月</text>
                  </view>
                  <view class="tabs-title-con">
                    <text>2025/5</text>
                    <view
                      class="tabs-title-con-center"
                      @click="handleMonth"
                    >
                      <text>按月</text>
                      <i class="iconfont icon-daosanjiao"></i>
                    </view>
                  </view>
                  <view class="tabs-title-con">
                    <text>下一月</text>
                    <i class="iconfont icon-youjiantou1"></i>
                  </view>
                </view>
                <!-- 团队明细 -->
                <view
                  class="team-detail-con"
                  v-if="isDetailType == 1"
                >
                  <TeamDetail :activeTab="activeTab" />
                </view>
                <!-- 打卡明细 -->
                <view
                  class="clock-in-list-con"
                  v-if="isDetailType == 2"
                >
                  <view class="list-con-title">
                    <view class="list-con-title-left">
                      <i class="iconfont icon-kaoqintongji"></i>
                      <text>打卡班次</text>
                    </view>
                    <view
                      class="list-con-title-right"
                      v-if="tab.id == 1"
                    >
                      <nut-checkbox v-model="val1">只看异常打卡</nut-checkbox>
                      <!-- <text>只看异常打卡</text> -->
                    </view>
                  </view>
                  <view class="list-con">
                    <view
                      class="list-con-item"
                      v-for="item in 5"
                      :key="item"
                    >
                      <!-- 收起 -->
                      <view class="retract">
                        <view class="list-con-item-left">
                          <view class="check-in-time-date">
                            <view class="dete">
                              <text class="status-color"></text>
                              <text>05/09</text>
                              <text>周四</text>
                              <text class="status-text">异常</text>
                            </view>
                            <view class="check-in-time">
                              <text>上班时间 09:30，下班时间 06:30</text>
                            </view>
                          </view>
                        </view>
                        <view class="list-con-item-right">
                          <view
                            class="right-icon"
                            @click="expandClick"
                          >
                            <i
                              class="iconfont icon-xiajiantou"
                              :style="{
                                transform: isExpand ? 'rotate(180deg)' : 'rotate(0deg)',
                                transition: 'transform .5s ease',
                              }"
                            ></i>
                          </view>
                        </view>
                      </view>
                      <!-- 展开(考勤) -->
                      <view
                        class="expand"
                        v-if="isExpand && tab.id == 0"
                      >
                        <view class="con-item">
                          <view class="con-item-left">
                            <view class="check-in-time-box">
                              <view class="time">
                                <!-- active 改变状态是否打卡状态 -->
                                <view class="in-time">
                                  <view class="check-icon">
                                    <text></text>
                                    <!--占位-->
                                  </view>
                                  <view class="in-time-text">
                                    <text>上班时间09:30</text>
                                    <nut-tag
                                      color="#EEF4FF"
                                      text-color="#1E74FD"
                                      >缺卡</nut-tag
                                    >
                                  </view>
                                </view>
                                <!-- 外勤 -->
                                <view
                                  class="check-field-personnel"
                                  v-if="false"
                                >
                                  <text> 右滑可切换至外勤打卡 </text>
                                </view>
                                <!-- 缺卡 -->
                                <view
                                  class="check-miss"
                                  v-if="false"
                                >
                                  <text>申请纠正<i class="iconfont icon-youjiantou1"></i></text>
                                </view>
                                <!-- 正常打卡时间 -->
                                <view
                                  class="check-time"
                                  v-if="true"
                                >
                                  <view class="check-time-text">
                                    <text>打卡时间09:29</text>
                                    <nut-tag
                                      color="#EEF4FF"
                                      text-color="#1E74FD"
                                    >
                                      正常
                                    </nut-tag>
                                  </view>
                                  <view class="check-adress">
                                    <i class="iconfont icon-wifi"></i>
                                    <text>袋鼠播播娱乐有限公司_005</text>
                                  </view>
                                </view>
                              </view>
                              <view class="time">
                                <!-- active 改变状态是否打卡状态 -->
                                <view class="in-time active">
                                  <view class="check-icon">
                                    <text></text>
                                  </view>
                                  <text class="in-time-text">下班时间09:30</text>
                                </view>
                                <!-- 外勤 -->
                                <view
                                  class="check-field-personnel"
                                  v-if="false"
                                ></view>
                                <!-- 正常打卡时间 -->
                                <view
                                  class="check-time"
                                  v-else
                                >
                                  <view class="check-time-text">
                                    <text>打卡时间09:29</text>
                                    <nut-tag
                                      color="#EEF4FF"
                                      text-color="#1E74FD"
                                    >
                                      正常
                                    </nut-tag>
                                  </view>
                                  <view class="check-adress">
                                    <i class="iconfont icon-wifi"></i>
                                    <text>袋鼠播播娱乐有限公司_005</text>
                                  </view>
                                </view>
                              </view>
                            </view>
                          </view>
                          <view class="con-item-right">
                            <view
                              class="positioning-btn"
                              v-if="false"
                            >
                              <text>处理</text>
                            </view>
                            <view class="positioning-status">
                              <img
                                src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01bqI1Z41S9wNyFZmiJ_!!1034622205.png"
                                alt=""
                              />
                            </view>
                          </view>
                        </view>
                      </view>
                      <!-- 展开（假勤） -->
                      <view
                        class="expand"
                        v-if="tab.id == 1"
                      >
                        <view class="con-item">
                          <view class="con-item-left reason">
                            <view class="check-in-time-box">
                              <view class="time">
                                <!-- active 改变状态是否打卡状态 -->
                                <view class="in-time reason">
                                  <view class="check-icon reason">
                                    <text></text>
                                    <!--占位-->
                                  </view>
                                  <view class="in-time-text">
                                    <text>时长2小时</text>
                                    <nut-tag
                                      color="#EEF4FF"
                                      text-color="#1E74FD"
                                      >缺卡</nut-tag
                                    >
                                  </view>
                                </view>
                                <!-- 正常打卡时间 -->
                                <view class="check-time">
                                  <view class="check-time-text">
                                    <text>事假</text>
                                  </view>
                                  <view class="reason">
                                    <text>事由：有点事情</text>
                                  </view>
                                  <view class="check-adress">
                                    <text>请假时间：2025/05/09 14:00 - 2025/05/09 14:00</text>
                                  </view>
                                </view>
                              </view>
                            </view>
                          </view>
                          <view class="con-item-right">
                            <view
                              class="positioning-btn"
                              v-if="false"
                            >
                              <text>处理</text>
                            </view>
                            <view class="positioning-status">
                              <img
                                src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01bqI1Z41S9wNyFZmiJ_!!1034622205.png"
                                alt=""
                              />
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </nut-tab-pane>
        </nut-tabs>
        <view class="addTask-bottom">
          <view class="addTask-bottom-logo">
            <img
              src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01ROtCca1S9wNLeJ6zx_!!1034622205.png"
              alt=""
            />
          </view>
        </view>
      </view>
    </view>
    <view
      v-if="activeTab == 0"
      class="add-schedule-btn"
      @click="submit"
    >
      <nut-button color="#1E74FD"> 确定考勤结果无误 </nut-button>
    </view>
    <nut-popup
      v-model:visible="monthPicker"
      position="bottom"
      round
      :style="{ height: '30%' }"
    >
      <nut-date-picker
        v-model="val"
        type="year-month"
        :min-date="min"
        :max-date="max"
        :three-dimensional="false"
        @confirm="confirm"
      ></nut-date-picker>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import Taro, { useRouter } from "@tarojs/taro";
import TeamDetail from "./teamDetail/index.vue";
const router = useRouter();
const isDetailType = ref();
const activeTab = ref(0);
const val1 = ref(0);
const tabs = ref([
  { id: 0, title: "考勤打卡", disabled: false },
  { id: 1, title: "假勤", disabled: false },
  { id: 2, title: "加班", disabled: true },
  { id: 2, title: "外出", disabled: true },
]);
const monthPicker = ref(false);
const min = new Date(2012, 0);
const max = new Date(2024, 10);
const val = ref(new Date(2020, 2));
// router.params.isDetailType 1 团队明细 2 个人明细
onMounted(() => {
  isDetailType.value = router.params.isDetailType;
  if (router.params.isDetailType == "1") {
    Taro.setNavigationBarTitle({
      title: "团队明细",
    });
  }
});
const confirm = ({ selectedValue }) => {
  console.log(selectedValue);
  monthPicker.value = false;
};
const handleMonth = () => {
  monthPicker.value = true;
};
const isExpand = ref(false);
const changeTab = (val: number) => {
  console.log(val);
  console.log(activeTab.value);
};
const expandClick = (val: number) => {
  isExpand.value = !isExpand.value;
};
</script>

<style lang="less">
@import url("./index.less");
</style>
